<template>
  <view class="bottom-nav">
    <button 
      class="nav-btn" 
      :class="{ active: currentPage === 'component' }"
      @click="jumpTo('/pages/component-page/component-page')"
    >
      组件
    </button>
    <button 
      class="nav-btn" 
      :class="{ active: currentPage === 'syntax' }"
      @click="jumpTo('/pages/syntax/syntax')"
    >
      语法
    </button>
    <button 
      class="nav-btn" 
      :class="{ active: currentPage === 'api' }"
      @click="jumpTo('/pages/api/api')"
    >
      API
    </button>
    <button 
      class="nav-btn" 
      :class="{ active: currentPage === 'case' }"
      @click="jumpTo('/pages/case/case')"
    >
      案例
    </button>
  </view>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  currentPage: {
    type: String,
    required: true,
    validator: (value) => {
      return ['component', 'syntax', 'api', 'case'].includes(value);
    }
  }
});

const jumpTo = (url) => {
  const currentUrl = getCurrentPages()[getCurrentPages().length - 1].route;
  const targetUrl = url.replace(/^\//, ''); // 移除开头的斜杠，与currentUrl格式统一
  if (currentUrl === targetUrl) return;

  uni.navigateTo({
    url,
    fail: (err) => {
      console.error("跳转失败：", err);
      uni.showToast({ title: "页面不存在", icon: "none", duration: 2000 });
    }
  });
};
</script>

<style scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  height: 90rpx;
  border-top: 1rpx solid #eee;
  background-color: #fff;
  z-index: 999; 
}
.nav-btn {
  flex: 1;
  height: 100%;
  line-height: 90rpx;
  padding: 0;
  margin: 0;
  border: none;
  background-color: transparent;
  font-size: 26rpx;
  color: #666;
  transition: opacity 0.2s;
}
.nav-btn.active {
  color: #007AFF;
  font-weight: 500;
}
.nav-btn:active {
  opacity: 0.7;
}
</style>